<template>
    <textarea ref="editor" :id="uniqueID">
    </textarea>
</template>

<script>
export default {
    name: 'tinymce',
    props: ['value'],
    data() {
        return {
            elID: null,
            editor: null,
            syncValue: null,
        }
    },
    mounted() {
        tinymce.init({
            selector: `#${this.uniqueID}`,
            menubar: false,
            plugins: 'preview fullpage paste searchreplace autolink code fullscreen image link media codesample table hr toc lists wordcount textpattern quickbars emoticons',
            toolbar: 'formatselect | image codesample table | forecolor backcolor fontsizeselect removeformat | blackquote numlist bullist aligncenter | hr emoticons toc media code fullscreen',
            quickbars_selection_toolbar: 'bold italic underline strikethrough quicklink blockquote',
            quickbars_insert_toolbar: false,
            relative_urls: false,
            codesample_languages: [
                {text:"bash",value:"bash"},
                {text:'HTML/XML',value:'markup'},
                {text:"XML",value:"xml"},
                {text:"HTML",value:"html"},
                {text:"CSS",value:"css"},
                {text:"Javascript",value:"javascript"},
                {text:"c",value:"c"},
                {text:"C++",value:"cpp"},
                {text:"ruby",value:"ruby"},
                {text:"go",value:"go"},
                {text:"java",value:"java"},
                {text:"JSON",value:"json"},
                {text:"kotlin",value:"kotlin"},
                {text:"lua",value:"lua"},
                {text:"makefile",value:"makefile"},
                {text:"markdown",value:"markdown"},
                {text:"nginx",value:"nginx"},
                {text:"PHP",value:"php"},
                {text:"python",value:"python"},
                {text:"rust",value:"rust"},
                {text:"SQL",value:"sql"},
                {text:"TypeScript",value:"typescript"},
                {text:"YAML",value:"yaml"}
            ],
            textpattern_patterns: [
                {start: '#', format: 'h1'},
                {start: '##', format: 'h2'},
                {start: '###', format: 'h3'},
                {start: '####', format: 'h4'},
                {start: '#####', format: 'h5'},
                {start: '######', format: 'h6'},
                {start: '> ', format: 'blackquote'},
                {start: '- ', cmd: 'InsertUnorderedList'},
            ],
            setup: (editor) => {
                this.editor = editor
                editor.on('init', () => {
                    editor.setContent(this.value ? this.value: '')
                })
            },
            init_instance_callback: (editor) => {
                editor.on('change keyup undo redo', _.debounce(() => {
                    const value = this.stripHtml(editor.getContent())
                    if (value === this.syncValue) {
                        return
                    }
                    this.syncValue = value
                    this.$emit('input', value)
                    console.log('tinymce emit input')
                }, 600));
            }
        })
    },
    watch: {
        value(value){
            if (value === this.syncValue) {
                return
            }
            console.log('tinymce watch value')
            this.editor.setContent(value ? value: '')
        },
    },
    computed: {
        uniqueID() {
            if (_.isNull(this.elID)) {
                this.elID = _.uniqueId('tinymce_')
            }
            return this.elID
        }
    },
    methods: {
        stripHtml(html){
            return _.trim(_.replace(html, /^.*<body>|<\/body>.*$/gms, ''))
        },
    },
}
</script>
